<template>
	<view class="container">
		<view class="logo">
			<image src="" mode=""></image>
		</view>
		<u-form :model="form" ref="uForm" class="form">
			<u-form-item label="">
				<u-icon name="phone" color="rgba(0,0,0,0.3)" size="40" class="icon"></u-icon>
				<u-input placeholder="请输入手机号" v-model="form.phone" />
			</u-form-item>
			<u-form-item label="" prop="code" label-width="150">
				<u-icon name="lock" color="rgba(0,0,0,0.3)" size="40" class="icon"></u-icon>
				<u-input :border="false" placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
				<u-button slot="right" style="background-color:#ffe300;" size="mini" @click="getCode">{{codeTips}}
				</u-button>
			</u-form-item>
		</u-form>
		<view class="">
			<view class="login" @click="toLogin">登录</view>
			<view class="nologin" @click="toCenter">暂不登录</view>

		</view>
		<view class="third-party">
			<view>其他登录方式</view>
			<!-- #ifdef H5 -->
			<u-icon @click="vendorLogin('WxH5')" name="weixin-circle-fill" color="#3db135" size="120"></u-icon>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<u-icon open-type="getUserInfo" @getuserinfo="onGotUserInfo" name="weixin-circle-fill" color="#3db135"
				size="120"></u-icon>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<u-icon @click="vendorLogin('WxH5')" name="weixin-circle-fill" color="#3db135" size="120"></u-icon>
			<!-- #endif -->
		</view>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<view>
			<image class="buttom" src="../../static/loginditu.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeTips: '',
				form: {
					phone: "",
					code: ''
				},
				relus: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},
		methods: {
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			toCenter() {
				uni.reLaunch({
					url: '/pages/user/user'
				})
			},
			async toLogin() {
				this.logining = true;
				let sendData = {}
				if (this.loginWay == 0) {
					const {
						username,
						password
					} = this
					sendData = {
						username,
						password,
						loginWay: this.loginWay
					}
				} else if (this.loginWay == 1) {
					const {
						mobile,
						code
					} = this
					sendData = {
						mobile,
						code,
						loginWay: this.loginWay
					}
				}
				this.login(sendData).then(res => {
					this.logining = false
					this.getCartProducts()
					this.goReferer()
				}).catch(e => {
					this.logining = false
				})
			},
			goReferer() {
				if (this.referer) {
					uni.reLaunch({
						url: decodeURIComponent(this.referer),
						fail: this.toCenter(),
					})
				} else {
					this.toCenter()
				}
			},
			async vendorLogin(code, data) {
				let account = Account.init(code)
				switch (code) {
					case 'WxH5': {
						let url = '/addons/xshop/vendor/getAuthUrl?vendor=WxH5'
						if (!!this.referer) url += '&payload[referer]=' + encodeURIComponent(this.referer)
						window.location.href = url
						break;
					}
					case 'WechatMp': {
						let res = await account.login(data)
						uni.setStorageSync('token', res.data.token)
						this.getUserinfo()
						this.goReferer()
						break;
					}
					case 'App5': {
						account.login(data, res => {
							uni.setStorageSync('token', res.data.token)
							this.getUserinfo()
							this.goReferer()
						}, e => {})
						break;
					}
				}
			},
			onGotUserInfo: function(e) {
				let detail = e.detail
				let data = {
					encryptedData: detail.encryptedData,
					iv: detail.iv,
					rawData: detail.iv
				}
				this.vendorLogin('WechatMp', data)
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%
	}

	.container {
		position: relative;
		height: 100%;

		.form {
			padding: 50rpx;
		}

		.icon {
			margin-right: 15rpx;
		}

		.login {
			width: 80%;
			margin: 20rpx auto;
			background-color: #ffe300;
			height: 80rpx;
			text-align: center;
			padding: 20rpx;
			border-radius: 50rpx;
		}

		.nologin {
			width: 80%;
			margin: 20rpx auto;
			border: 1rpx solid rgba($color: #ffe300, $alpha: 1);
			height: 80rpx;
			text-align: center;
			padding: 20rpx;
			border-radius: 50rpx;
		}

		.buttom {
			height: 400rpx;
			width: 100%;
			position: absolute;
			bottom: 0rpx;
			z-index: -1;
		}
	}

	.third-party {
		margin: 40rpx auto;
		color: rgba($color: #000000, $alpha: 0.3);
		text-align: center;
	}
</style>
